<template>
	<view class="content">
		<view class="head">
			<image style="width: 100%" src="../../static/tab/bg.png" mode=""></image>
			<view class="search">
				<view class="dw" @click="getsearch">
					<image src="../../static/dingwei.png" mode=""></image>
					<span>{{ address }}</span>
					<image class="xiala" src="../../static/xiala.png" mode=""></image>
				</view>
				<view class="dis">
					<view class="tabs1">
						<view @click="tabOpt(item.id)" v-for="(item, index) in list2" :key="index" :class="tabIndex === item.id ? 'tabItem' : 'tabItem1'">
							{{ item.name }}
						</view>
					</view>
					<!-- 分类 -->
					<view class="" style="display: flex">
						<scroll-view scroll-x="true" class="scroll-view_H" @scroll="scrollX" :scroll-left="left">
							<view :class="item.id != cid ? 'menu-topic-view' : 'menu-topic-view1'" v-for="(item, i) in list3" :key="i" @click="select(item.id)">
								<view :class="currentTab == i ? 'menu-topic-act' : 'menu-topic'">
									<text class="menu-topic-text">{{ item.name }}</text>
									<view class="menu-topic-bottom">
										<view class="menu-topic-bottom-color"></view>
									</view>
								</view>
							</view>
						</scroll-view>

						<view class="tit" style="margin-top: 14rpx" @click="toggle('top')">展开</view>
						<view class="xiabiao" style="margin-top: 30rpx" @click="toggle('top')"></view>
					</view>

					<!-- 普通弹窗 -->
					<uni-popup ref="popup" background-color="#fff" @change="change">
						<view class="popup">
							<view :class="item.id != cid ? 'popItem' : 'popItem1'" v-for="(item, index) in list3" @click="select(item.id, index)">{{ item.name }}</view>
						</view>
						<view class="anniu">
							<view class="canle" @click="close">取消</view>
							<view class="canle" @click="confirm">确定</view>
						</view>
					</uni-popup>
				</view>
			</view>
		</view>

		<view class="cont">
			<view class="mk" v-for="item of list4" @click="navGo(item)">
				<image :src="item.pic" mode=""></image>
				<view class="type">{{ item.cdown[0].name }}</view>
				<!-- <image class="topImg" :src="item.pic" mode=""></image> -->
				<view class="self">
					<view class="jl">
						<div>
							<image src="../../static/dingwei01.png" mode=""></image>
							<span style="margin-left: 10rpx">{{ address }}</span>
						</div>
						<div>{{ item.juli }}</div>
					</view>
					<view class="price">
						费用：
						<text style="color: #f31515" v-if="item.isfree == 0">收费</text>
						<text v-if="item.isfree == 1" style="color: #3681f3">免费</text>
					</view>
				</view>
			</view>
		</view>

		<view class="map" @click="goMap(lat, lon)">
			<image class="mapImg" src="../../static/ditu.png" mode=""></image>
			<view class="">地图</view>
		</view>
	</view>
</template>

<script>
// import
export default {
	data() {
		return {
			keyword: '',
			src: '../../static/logo.png',
			address: '',
			current4: 0,
			current5: 0,
			tabIndex: 1,
			order: 1,
			left: 0,
			cid: -1,
			pagenum: 1, //分页页码
			cid: 0, //类别默认0 全部
			lat: '',
			lon: '',
			list2: [
				{ id: 1, name: '最新', disabled: false },
				{ id: 2, name: '最近', disabled: false },
				{ id: 3, name: '最热', disabled: false },
				{ id: 4, name: '收藏', disabled: false }
			],
			list3: [],
			list4: []
		};
	},
	onLoad(opt) {
		this.getLocat();
		this.getcate(); //分类
		this.getlist(); //数据列表
	},
	onShow() {
		this.address = uni.getStorageSync('address');
		this.getlist(); //数据列表
		console.log('选择地址111', this.address);
	},
	// 触底功能
	onReachBottom() {
		this.pagenum++;
		this.getlist();
	},
	methods: {
		// 获取分类
		getcate() {
			this.$api.get('index/getIndexData', {}).then((res) => {
				console.log('分类111', res);

				if (res.status == -1) {
					uni.showToast({
						title: res.msg
					});
				} else {
					this.list3 = res.clist;
					console.log('分类111', res);
				}
			});
		},
		navGo(it){//去导航页面
			uni.navigateTo({
				url: '/pages/newPages/checkLocation?obj=' + encodeURIComponent(JSON.stringify(it))
			})
		},
		scrollX(e) {
			console.log('开始滚动scrollx', e.timeStamp, e);
		},
		// 获取列表数据
		getlist() {
			console.log('address', this.address);
			this.$api.post('index/getlist', { cid: this.cid, pagenum: this.pagenum, order: this.order, addrss: this.address }).then((res) => {
				console.log('列表111', res);
				if (res.status == -1) {
					uni.showToast({
						title: res.msg
					});
				} else {
					this.list4 = this.list4.concat(res.data);
					console.log('数据列表111', this.list4);
				}
			});
		},

		change(e) {
			console.log('当前模式：' + e.type + ',状态：' + e.show);
		},
		toggle(type) {
			this.type = type;
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type);
		},
		// 选项
		swichMenu(i) {
			this.currentTab = i;
			if (this.currentTab == 1) {
				this.onGetCheckInList();
				this.onRefresh();
			}
			this.close();
		},
		close() {
			this.$refs.popup.close();
		},
		confirm() {
			this.$refs.popup.close();
		},
		select(e, ind) {
			console.log('点击选择分类');
			this.left = ind * 60;
			this.cid = e;
			console.log('left', this.left, e);
			this.list4 = [];
			this.getlist();
		},
		tabOpt(e) {
			//最新分类
			console.log('选中321', e);
			if (e == 4) {
				uni.navigateTo({
					url: '/pages/newPages/myCollect'
				});
			} else {
				this.order = e;
				this.tabIndex = e;
				this.list4 = [];
				this.getlist();
			}
		},
		getsearch() {
			uni.navigateTo({
				url: '/pages/index/searchch'
			});
		},
		goMap(lat, lon) {
			//
			uni.navigateTo({
				url: '/pages/index/map?lat=' + lat + '&lon=' + lon
			});
		},
		getLocat() {
			//获取当前位置

			let that = this;
			if (!uni.getStorageSync('address')) {
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						that.address = res.city;
						that.lon = res.longitude;
						that.lat = res.latitude;
						console.log('当前定位', res, that.address);
					},
					fail: function (e) {
						console.log('定位失败了 应该怎么办', e);
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					},
					complete() {
						// console.error(Error)
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
// 头部tabs
.scroll-view_H {
	white-space: nowrap;
	width: 66%;
}

.tit {
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.xiabiao {
	border-left: 5px solid transparent; /* 左侧透明 */
	border-right: 5px solid transparent; /* 右侧透明 */
	border-top: 5px solid #333; /* 底部红色，调整高度和颜色以适应需要 */
}

.menu-topic-view1 {
	display: inline-block;
	// white-space: nowrap;
	height: 86rpx;
	position: relative;

	// width: 133rpx;
	height: 43rpx;
	background: #d8ecff;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #49a3f9;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx 20rpx 10rpx 0;
}
.menu-topic-view {
	display: inline-block;
	// white-space: nowrap;
	height: 86rpx;
	position: relative;

	// width: 133rpx;
	height: 43rpx;
	background: #f5f5f5;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx 20rpx 10rpx 0;

	.menu-topic-text {
		// font-size: 28rpx;
		color: #999999;
		padding: 10rpx 15rpx;
	}

	.menu-topic-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;

		.menu-topic-bottom-color {
			width: 50rpx;
			height: 8rpx;
			border-radius: 2rpx;
		}
	}

	.menu-topic-act .menu-topic-text {
		font-weight: 700;
		color: $theme-color;
	}

	.menu-topic-act .menu-topic-bottom {
		display: flex;
		justify-content: center;
	}

	.menu-topic-act .menu-topic-bottom-color {
		background: $theme-color;
	}
}

// 弹窗
.popup-content {
	@include flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	height: 50px;
	background-color: #fff;
	color: #000000;
}
.popup {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 27rpx;
}
.popItem {
	width: 133rpx;
	height: 43rpx;
	background: #f5f5f5;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx;
}
.popItem1 {
	width: 133rpx;
	height: 43rpx;
	background: #d8ecff;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #49a3f9;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx;
}
.anniu {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
}
.canle {
	width: 150rpx;
	height: 50rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 50rpx;
	background-color: #49a3f9;
	border-radius: 10rpx;
	color: #fff;
}
// 折叠
.tpp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 650rpx;
}

.price {
	margin: 10rpx 27rpx;
	font-weight: 500;
	font-size: 27rpx;
	color: #333333;
	line-height: 32rpx;
}
.tabs1 {
	display: flex;
	// width: 100rpx;
	// height: 43rpx;
	// background: #F5F5F5;
	// border-radius: 22rpx;
	text-align: center;
	line-height: 43rpx;

	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
}
.tabItem {
	width: 100rpx;
	height: 43rpx;
	background: #49a3f9;
	border-radius: 22rpx;
	margin-right: 20rpx;
	color: #fff;
}
.tabItem1 {
	width: 100rpx;
	height: 43rpx;
	background: #f5f5f5;
	border-radius: 22rpx;
	margin-right: 20rpx;
}

.tabs2 {
	// display: flex;
	margin: 20rpx 0;
	text-align: center;
	line-height: 43rpx;

	font-weight: 500;
	font-size: 24rpx;
	color: #999999;

	width: 100rpx;
	height: 43rpx;
	background: #49a3f9;
	border-radius: 22rpx;
	margin-right: 20rpx;
	color: #fff;
}
.dis {
	position: fixed;
	top: 200rpx;
	z-index: 9999999;
	// margin: 0rpx 27rpx;
}
.map {
	display: flex;
	width: 133rpx;
	height: 53rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(167, 167, 167, 0.3);
	border-radius: 27rpx;
	font-weight: 500;
	font-size: 27rpx;
	color: #3681f3;
	position: fixed;
	bottom: 250rpx;
	right: 13rpx;
	z-index: 99;
	text-align: center;
	line-height: 53rpx;
	// color: ;
}
.mapImg {
	width: 23rpx;
	height: 23rpx;
	margin: 15rpx 10rpx 0 25rpx;
}
.content {
	position: relative;
}
.head {
	background-image: url('/static/tab/bg.png');
	background-size: cover;
	width: 100%;
	height: 307rpx;
	position: relative;
	position: fixed;
	top: 0;
	z-index: 999999999;
	image {
		height: 340rpx;
	}
}
.search {
	width: 90%;
	padding: 0 5%;
	position: absolute;
	top: 120rpx;
	z-index: 99;

	image {
		width: 25rpx;
		height: 28rpx;
		margin: 0 10rpx;
		// margin-bottom: 40rpx;
	}
	.xiala {
		width: 18rpx;
		height: 12rpx;
	}
}
.sp {
	margin-left: 18rpx;
	font-weight: bold;
	font-size: 24rpx;
	color: #333333;
	margin-top: 20rpx;
}
.dw {
	margin-bottom: 35rpx;
}
.cont {
	// padding: 0 27rpx;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 350rpx;
	z-index: 99;
	image {
		width: 322rpx;
		height: 360rpx;
	}
}
.mk {
	background-color: #fff;
	// display: flex;
	// flex-wrap: wrap;
	// flex: 1 0 200px; /* 设置项目的 flex 值 */
	//  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
	width: calc(45% - 10px); /* 每列宽度，减去间距 */
	// margin-right: 3%; /* 元素右间距 */
	margin: 2% 3.5%; /* 元素下间距 */
	position: relative;
	.topImg {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
}

.type {
	position: absolute;
	z-index: 9;
	top: 310rpx;
	left: 20rpx;
	width: 133rpx;
	height: 40rpx;
	background: #000000;
	border-radius: 20rpx;
	opacity: 0.5;
	font-weight: bold;
	font-size: 23rpx;
	color: #ffffff;
	line-height: 40rpx;
	text-align: center;
}
.xx {
	display: flex;
	padding: 13rpx 18rpx;
}
.jl {
	margin-left: 14rpx;
	padding: 13rpx 18rpx;
	display: flex;
	justify-content: space-between;
	font-weight: 500;
	font-size: 21rpx;
	color: #999999;
	// width: 45%;
	image {
		width: 18rpx;
		height: 23rpx;
	}
}
</style>
